<template>
    <s-layout id="layout" :title="'日收益详情'" navbar="normal" leftIconColor="#ffffff" :autoBack="true" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#ffffff', fontSize: '32rpx',fontWeight:'600' }">
        <!-- 最大盒子 -->
        <view class="container" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/staff_project_arrange.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px'}">
            <view class="area form_box">
                <scroll-view scroll-y :style="{ height: jurisdiction.includes(group_id) && state == '0' ? '74vh' : 'calc(74vh + 80rpx)' }" :enable-back-to-top="true" v-if="FormData">
                    <!-- 头像信息盒子 -->
                    <view class="head_message_box">
                        <!-- 头像 -->
                        <view class="head">
                            <up-avatar :size="'104rpx'" :src="`${baseUrl}${FormData.user.avatar}`"></up-avatar>
                        </view>
                        <!-- 信息盒子 -->
                        <view class="message_box">
                            <!-- 标题 -->
                            <view class="message_title">{{ FormData.user.nickname }}</view>
                            <!-- 提交时间 -->
                            <view class="message_time">{{ formatDatetime(FormData.createtime) }} 提交</view>
                        </view>
                    </view>
                    <!-- 表单 -->
                    <u--form :labelStyle="labelStyle" labelPosition="left" :model="EditFormData" :rules="rules" ref="formRole" :borderBottom="false">
                        <!-- 表单列表盒子 -->
                        <view class="list_box">
                            <!-- 部门 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="部门：" prop="department_id" ref="department_id">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="project_title" border="none"></u--input>
                            </u-form-item>
                            <!-- 时间 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="时间：" prop="date" ref="date">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.date" border="none"></u--input>
                            </u-form-item>
                            <!-- 班次 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="班次：" prop="classes_text" ref="classes_text">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.classes_text" border="none"></u--input>
                            </u-form-item>
                            <!-- 类型 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="类型：" prop="type_text" ref="type_text">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.department.type_text" border="none"></u--input>
                            </u-form-item>
                            <!-- 收入标题 -->
                            <view class="message">
                                收入
                                <view class="glide"></view>
                            </view>
                            <!-- 数量 && 单价 -->
                            <view class="num_price_box">
                                <view class="num_price_item" v-for="(item,index) of FormData.yielddata" :key="index">
                                    <view><text class="num_price_title">数量({{ FormData.department.type_text.substr(1,2) }})：</text><text class="num_price_number">{{ item.num }}</text></view>
                                    <view class="price"><text class="num_price_title">单价：</text><text class="num_price_number">{{ item.price }}</text></view>
                                </view>
                            </view>
                            <!-- 人数标题 -->
                            <view class="message">
                                人数
                                <view class="glide"></view>
                            </view>
                            <!-- 人数表单 -->
                            <u-form-item v-if="FormData.department.type_text !== '计时'" :borderBottom="false" :labelWidth="100" label="人数：" prop="people_num" ref="people_num">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.people_num" border="none"></u--input>
                            </u-form-item>

                            <u-form-item v-if="FormData.department.type_text == '计时'" :borderBottom="false" :labelWidth="100" label="人数：" prop="work_time_num" ref="work_time_num">
                                <u--input  :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="digit" placeholder="请输入工时数" v-model.lazy="FormData.work_time_num" border="none"></u--input>
                            </u-form-item>

                            
                            <!-- 含税金额 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="含税金额：" prop="tax_money" ref="tax_money">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.tax_money" border="none"></u--input>
                            </u-form-item>
                            <!-- 税率 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="税率：" prop="tax_rate" ref="tax_rate">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.department.tax_rate" border="none"></u--input>
                            </u-form-item>
                            <!-- 税金 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="税金：" prop="inc_taxes" ref="inc_taxes">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.inc_taxes" border="none"></u--input>
                            </u-form-item>
                            <!-- 税后金额 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="税后金额：" prop="after_tax_money" ref="after_tax_money">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.after_tax_money" border="none"></u--input>
                            </u-form-item>
                            <!-- 费用支出 -->
                            <u-form-item :borderBottom="false" :labelWidth="100" label="费用支出：" prop="dec_fee" ref="dec_fee">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.dec_fee" border="none"></u--input>
                            </u-form-item>
                            <!-- 图片 -->
                            <view>
                                <view class="image">图片：</view>
                                <view v-if="images != ''">
                                    <up-album :urls="urls2"></up-album>
                                </view>
                                <view v-else class="not">暂无图片</view>
                            </view>
                            <!-- 支出标题 -->
                            <view class="message" v-if="jurisdiction.includes(group_id)">
                                支出
                                <view class="glide"></view>
                            </view>
                            <!-- 支出数量 -->
                            <u-form-item v-if="jurisdiction.includes(group_id)" :required="state == '0'" :borderBottom="false" :labelWidth="100" label="支出数量：" prop="dec_num" ref="dec_num">
                                <u--input v-if="state == '0'" :disabled="state !== '0'" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" v-model="EditFormData.dec_num" border="none"></u--input>
                                <u--input v-else disabled :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" v-model="FormData.dec_num" border="none"></u--input>
                                <!-- {{ FormData.dec_num }} -->
                            </u-form-item>
                            <!-- 工资标题 -->
                            <view class="message" v-if="jurisdiction.includes(group_id)">
                                工资
                                <view class="glide"></view>
                            </view>
                            <!-- 工资 -->
                            <u-form-item v-if="jurisdiction.includes(group_id)" :required="state == '0'" :borderBottom="false" :labelWidth="100" label="工资：" prop="dec_money" ref="dec_money">
                                <u--input v-if="state == '0'" @change="computed_gross_margin" :disabled="state !== '0'" :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" v-model="EditFormData.dec_money" border="none"></u--input>
                                <u--input v-else disabled :clearable="false" disabledColor="rgba(0,0,0,0)" inputAlign="right" type="number" v-model="FormData.dec_money" border="none"></u--input>
                                <!-- {{ FormData.dec_money }} -->
                            </u-form-item>
                            <!-- 毛利标题 -->
                            <view class="message" v-if="jurisdiction.includes(group_id)">
                                毛利
                                <view class="glide"></view>
                            </view>
                            <!-- 毛利 -->
                            <u-form-item v-if="jurisdiction.includes(group_id)" :borderBottom="false" :labelWidth="100" label="毛利：" prop="gross_margin" ref="gross_margin">
                                <u--input :clearable="false" disabledColor="rgba(0,0,0,0)" disabled inputAlign="right" type="text" v-model="FormData.gross_margin" border="none"></u--input>
                            </u-form-item>
                            <!-- 备注 -->
                            <view>
                                <view class="remark">备注：</view>
                                <up-textarea disabled :placeholderStyle="{color:'#999999',fontWeight: 500,fontSize:'26rpx'}" height="80" v-model="FormData.remark" placeholder="暂无备注"></up-textarea>
                            </view>
                        </view>
                    </u--form>

                </scroll-view>
            </view>
        </view>

    </s-layout>

    <!-- 底部保存按钮 -->
    <view v-if="jurisdiction.includes(group_id) && state == '0'">
        <s-button @leftNetWork="cancellation" @rightNetWork="submitEdit"  :leftWidth="'50%'" :rightWidth="'50%'" :type="'twobutton'" :oneText="'作废'" :twoText="'提交'" />
    </view>
</template>

<script setup>
    import sheep from '@/sheep';
    import { ref, reactive } from 'vue';
    import { onLoad } from '@dcloudio/uni-app';
    import { baseUrl } from "@/sheep/config";
    import { formatDatetime } from '@/utils/fn.js';
    const { safeAreaInsets } = uni.getSystemInfoSync()
    onLoad((option) => {
        const userStoreValue = uni.getStorageSync('user-store');
        const userStoreObject = JSON.parse(userStoreValue)
        group_id.value = userStoreObject.userInfo.group_id
        id.value = option.id
        state.value = option.state
        let params = {
            ids:option.id
        }
        dailyViewData(params)
    })
    const jurisdiction = ref([3,4,6])
    const urls2 = ref([])
    const id = ref()
    const group_id = ref()
    const state = ref()
    const FormData = ref()
    // 表单
    const EditFormData = reactive({
        dec_num:'',
        dec_money:'',
        ids:'',
    })
    // 表单校验
    const rules = {
        dec_num:[
            {
                required:true,
                message:'请输入支出数量',
            },
            {
                validator: (rule, value, callback) => {
                    if (isNaN(value)) {
                        callback(new Error('请输入正确的格式')); // 校验不通过，返回错误信息
                    } else {
                        callback(); // 校验通过
                    }
                }
            }
        ],
        dec_money:[
            {
                required:true,
                message:'请输入工资',
            },
            {
                validator: (rule, value, callback) => {
                    if (isNaN(value)) {
                        callback(new Error('请输入正确的格式')); // 校验不通过，返回错误信息
                    } else {
                        callback(); // 校验通过
                    }
                }
            }
        ]
    }
    const images = ref('')
    const project_title = ref('')
    const type_text = ref('')
    // 封装接口：日收益详情接口  记得喷出 msg
    const dailyViewData = async (params = null) => {
        const res = await sheep.$api.daily_yield.dailyViewAPI(params)
        // console.log(res);
        type_text.value = res.data.department.type_text
        // console.log(type_text.value);
        FormData.value = res.data 
        project_title.value = FormData.value.department.company.name + '/'+ FormData.value.department.name
        images.value = FormData.value.images
        urls2.value = images.value.split(',').map(url => `${baseUrl}${url}`);
        EditFormData.ids = res.data.id
        // 支出数量
        let totalNum = 0
        res.data.yielddata.forEach(item => {
            totalNum += Number(item.num)
        });
        EditFormData.dec_num = totalNum; // 将总和赋值给
        // 工资
        EditFormData.dec_money = res.data.dec_fee
        // 毛利
        FormData.value.gross_margin = (Number(FormData.value.after_tax_money) - Number(FormData.value.dec_fee)).toFixed(2);
    }

    // 输入工资计算毛利
    const computed_gross_margin = (e) => {
		FormData.value.gross_margin = (
			Number(FormData.value.after_tax_money) - Number(e)
		).toFixed(2);
	}

    // 封装接口：日收益修改提交接口  记得喷出 msg
    const formRole = ref(null)
    const submitEdit = () => {
        formRole.value.validate().then(async (res)=> {
            const resust = await sheep.$api.daily_yield.dailyEditAPI(EditFormData);
            if(resust.code == 1) {
                setTimeout(() => {
                    sheep.$router.back(true)
                  
                },1000)
            } else {
                setTimeout(() => {
                    sheep.$helper.toast(resust.msg);
                  
                },1000)
            }
        }).catch((err) => {
            sheep.$helper.toast('请仔细核对内容！');
          
        })
    }


    // 封装接口：日收益作废接口  记得喷出 msg
    const dailyCancellation = async (params = null) => {
        const resust = await sheep.$api.daily_yield.dailyCancellationAPI(params)
        if(resust.code == 1) {
                setTimeout(() => {
                    sheep.$router.back(true)
                },1000)
            } else {
                setTimeout(() => {
                    sheep.$helper.toast(resust.msg);
                    
                },1000)
            }
    }

    // 作废
    const cancellation = () => {
        let params = {
            id:id.value
        }
        dailyCancellation(params)
    }

</script>

<style lang="scss" scoped>

    :deep(.u-form-item__body.data-v-b4fd400b){
        height: 80rpx;
        margin-bottom:10rpx;
        background-color: #F9FAFF;
    }

    :deep(.u-textarea.data-v-31706dd7) {
        background-color: #F9FAFF;
        padding: 0;
    }

    // uview 内部样式 up-textarea 文字距离
    :deep(.u-textarea__field.data-v-31706dd7) {
        margin-top: 30rpx;
        margin-left: 30rpx;
    }

    // uview 内部样式 输入内容右边间距
    :deep(.u-input__content__field-wrapper__field.data-v-5904192e) {
        margin-right: 20rpx;
    }

    // uview 内部样式 label左边间距
    :deep(.u-form-item__body__left.data-v-b4fd400b) {
        margin-left: 20rpx;
    }

    // uview 内部样式 label字体粗细
    :deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
        font-weight: $uni-font-weight;
    }

    // 最大盒子
    .container {
        width: 100%;
        background-size: cover; /* 或 contain */
    }
    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    // 表单盒子
    .form_box {
        width: calc(100% - 100rpx);
        padding: 30rpx 30rpx;
        margin-top: 20rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
    }

    // 头像信息盒子
    .head_message_box {
        height: 104rpx;
        padding-bottom: 30rpx;
        border-bottom: 2rpx solid #efefef;
        display: flex;
        align-items: center;
        // 头像
        .head {
            width: 104rpx;
            height: 104rpx;
            border-radius: 50%;
            background-color: skyblue;
            margin-right: 30rpx;
            margin-left: 10rpx;
        }
        // 信息盒子
        .message_box {
            // 标题
            .message_title {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: 700;
                font-size: 30rpx;
                font-style: normal;
                text-decoration: none;
                text-align: left;
                margin-bottom: 10rpx;
            }
            // 提交时间
            .message_time {
                font-family: PingFangSC;
                color: #999999;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
                text-align: left;
            }
        }
    }

    // 表单列表盒子
    .list_box {
        margin-top: 30rpx;
        // 数量 && 单价
        .num_price_box {
            width: calc(100% - 60rpx);
            background-color: #F9FAFF;
            border-radius: 16rpx;
            padding: 30rpx 30rpx 1rpx 30rpx;
            // 数量和单价 每一项
            .num_price_item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: 36rpx;
                margin-bottom: 30rpx;
                font-family: PingFangSC;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                // 文字
                .num_price_title {
                    font-weight: $uni-font-weight;
                    color: $uni-text-color;
                }
                // 数字
                .num_price_number {
                    font-weight: 500;
                    color: #999999;
                }
            }
        }
    }

    // 收入盒子
    .message {
        display: flex;
        justify-content: space-between; /* 左右对齐 */
        width: 100%;
        height: 48rpx;
        margin: 30rpx 0;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        font-style: normal;
        text-decoration: none;
        position: relative;
        .glide {
            width: 68rpx;
            height: 14rpx;
            border-radius: 5px;
            background-color: rgba(0, 56, 247, 0.5);
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }

    // 图片
    .image {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }

    .not {
        width: 140rpx;
        height: 140rpx;
        background-color:#ecdddd;
        border-radius: 10rpx;
        color: #999;
        font-size: 30rpx;
        line-height: 140rpx;
        text-align: center;
        font-weight: $uni-font-weight;
    }


     // 备注
    .remark {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 30rpx;
        font-style: normal;
        text-decoration: none;
    }

</style>